import * as path from "path";
import * as webpack from "webpack";
import HtmlWebpackPlugin from "html-webpack-plugin";
import { ROOT_DIR } from "../webpack.const";

const config: webpack.Configuration = {
  name: "login",
  entry: {
    index: {
      import: path.resolve(ROOT_DIR, "./src/modules/login/scripts/index.ts"),
      filename: "scripts/index.bundle.js",
    },
  },
  output: {
    path: path.join(ROOT_DIR, "./dist/login"),
    filename: "index.bundle.js",
    // 告知 webpack 在写入到输出文件系统时检查输出的文件是否已经存在并且拥有相同内容。
    compareBeforeEmit: true,
    clean: true,
    // 设置解析资源引用时，指定的公共路径，如果有 import "bg.png" 输出，同时指定了资源输出路径为 images/bg.png，
    // 那么访问图片时，使用 /login/images/bg.png 可以访问背景图片。
    // 这里注意一定要使用 / 根路径开头，否则解析资源时，例如 <img src="login/images/bg.png"> 就会从 html 文件当前目录查找当前
    // login/images 文件夹下的 pg.png 图片。
    publicPath: "/login/",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(ROOT_DIR, "./src/modules/login/index.html"),
      filename: "index.html",
      chunks: ["index"],
      // 设置编译后注入到 html 脚本的路径从当前 html 页面开始查找
      publicPath: "",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(png|mp4)$/i,
        type: "asset/resource",
      },
    ],
    generator: {
      "asset/resource": {
        // 所有图片存放在 dist/login/images 目录下
        outputPath: "images",
        filename: "[name][ext]",
        // 解析 css sass scss 中图片的引用时，样式文件中的 url 解析使用 images/*.png 格式。
        publicPath: "images/",
      },
    },
  },
};

export default config;
